<template>
    <div class="postlist">
        <article class="post-item" v-for="item in postList" :key="item.pid">
            <i :style="transUrlToBackground(item.imgUrl)"></i>
            <div class="main">
                <time>22 Jun 2018</time>
                <h2 class="title">{{item.title}}</h2>
                <p class="content">{{item.content}}</p>
                <div class="readmore">Read More<span>&gt;&gt;</span></div>
            </div>
        </article>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            type:this.$route.query.tab,
            postList: [
                {
                    pid:1,
                    title:'我是标题1',
                    content:'背景 目前有赞共享技术团队测试介入的微服务应用有几百个，大部分底层应用的单测覆盖率在 70% 以上，同时测试组提供的多纬度集成测试自动化的覆盖率也在 70% 以上。有赞的业务发展非常快，当存量代码较多时，新项目功能测试的整体覆盖率偏低是正常现象，另外开发提测时，并不能依据已有的全量覆盖率来判断对新增代码的自测完成度，基于这个背景，我们研发了增量代码覆盖率工具，作为项目质量的参考纬度之一，支持统计功能测试、单测和集成测试，并集成到了 DevOps 平台。 方案设计 有赞的 JAVA 代码覆盖率工具用的是…',
                    imgUrl:require('../assets/bg1.jpeg'),
                    jumpLink:'',
                    createTime: +new Date()
                },
                {
                    pid:2,
                    title:'我是标题2',
                    content:'我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容',
                    imgUrl:require('../assets/bg1.jpeg'),
                }
            ]
        }
    },
    mounted() {
        this.getPostList(this.type);
    },
    watch: {
        $route(newval,oldval){
            this.getPostList(newval.query.tab);
        }
    },
    methods:{
        transUrlToBackground(imgUrl) {
            return 'background-image:url('+ imgUrl +')';
        },
        getPostList(type){
            // axios.get('../api/all.json')
            // 	.then((result) => {
            // 		console.log(result);
            // 	});
            if(!type || type == 'all'){
                this.postList = [
                    {
                        "pid":1,
                        "title":"我是标题1",
                        "content":"背景 目前有赞共享技术团队测试介入的微服务应用有几百个，大部分底层应用的单测覆盖率在 70% 以上，同时测试组提供的多纬度集成测试自动化的覆盖率也在 70% 以上。有赞的业务发展非常快，当存量代码较多时，新项目功能测试的整体覆盖率偏低是正常现象，另外开发提测时，并不能依据已有的全量覆盖率来判断对新增代码的自测完成度，基于这个背景，我们研发了增量代码覆盖率工具，作为项目质量的参考纬度之一，支持统计功能测试、单测和集成测试，并集成到了 DevOps 平台。 方案设计 有赞的 JAVA 代码覆盖率工具用的是…",
                        "imgUrl":"//tech.youzan.com/content/images/2018/05/API-Application-Programming-Interface.png",
                        "jumpLink":"",
                        "createTime": ""
                    },
                    {
                        "pid":2,
                        "title":"我是标题2",
                        "content":"背景 目前有赞共享技术团队测试介入的微服务应用有几百个，大部分底层应用的单测覆盖率在 70% 以上，同时测试组提供的多纬度集成测试自动化的覆盖率也在 70% 以上。有赞的业务发展非常快，当存量代码较多时，新项目功能测试的整体覆盖率偏低是正常现象，另外开发提测时，并不能依据已有的全量覆盖率来判断对新增代码的自测完成度，基于这个背景，我们研发了增量代码覆盖率工具，作为项目质量的参考纬度之一，支持统计功能测试、单测和集成测试，并集成到了 DevOps 平台。 方案设计 有赞的 JAVA 代码覆盖率工具用的是…",
                        "imgUrl":"//tech.youzan.com/content/images/2018/05/WX20180515-193339.png",
                        "jumpLink":"",
                        "createTime": ""
                    }
                ];
            }else if(type == 'front'){
                this.postList = [
                    {
                        "pid":3,
                        "title":"我是标题3",
                        "content":"背景 目前有赞共享技术团队测试介入的微服务应用有几百个，大部分底层应用的单测覆盖率在 70% 以上，同时测试组提供的多纬度集成测试自动化的覆盖率也在 70% 以上。有赞的业务发展非常快，当存量代码较多时，新项目功能测试的整体覆盖率偏低是正常现象，另外开发提测时，并不能依据已有的全量覆盖率来判断对新增代码的自测完成度，基于这个背景，我们研发了增量代码覆盖率工具，作为项目质量的参考纬度之一，支持统计功能测试、单测和集成测试，并集成到了 DevOps 平台。 方案设计 有赞的 JAVA 代码覆盖率工具用的是…",
                        "imgUrl":"//tech.youzan.com/content/images/2018/05/API-Application-Programming-Interface.png",
                        "jumpLink":"",
                        "createTime": ""
                    },
                    {
                        "pid":4,
                        "title":"我是标题4",
                        "content":"背景 目前有赞共享技术团队测试介入的微服务应用有几百个，大部分底层应用的单测覆盖率在 70% 以上，同时测试组提供的多纬度集成测试自动化的覆盖率也在 70% 以上。有赞的业务发展非常快，当存量代码较多时，新项目功能测试的整体覆盖率偏低是正常现象，另外开发提测时，并不能依据已有的全量覆盖率来判断对新增代码的自测完成度，基于这个背景，我们研发了增量代码覆盖率工具，作为项目质量的参考纬度之一，支持统计功能测试、单测和集成测试，并集成到了 DevOps 平台。 方案设计 有赞的 JAVA 代码覆盖率工具用的是…",
                        "imgUrl":"//tech.youzan.com/content/images/2018/05/WX20180515-193339.png",
                        "jumpLink":"",
                        "createTime": ""
                    }
                ];
            }else{
                this.postList = this.postList = [
                    {
                        "pid":5,
                        "title":"我是标题5",
                        "content":"背景 目前有赞共享技术团队测试介入的微服务应用有几百个，大部分底层应用的单测覆盖率在 70% 以上，同时测试组提供的多纬度集成测试自动化的覆盖率也在 70% 以上。有赞的业务发展非常快，当存量代码较多时，新项目功能测试的整体覆盖率偏低是正常现象，另外开发提测时，并不能依据已有的全量覆盖率来判断对新增代码的自测完成度，基于这个背景，我们研发了增量代码覆盖率工具，作为项目质量的参考纬度之一，支持统计功能测试、单测和集成测试，并集成到了 DevOps 平台。 方案设计 有赞的 JAVA 代码覆盖率工具用的是…",
                        "imgUrl":"//tech.youzan.com/content/images/2018/05/API-Application-Programming-Interface.png",
                        "jumpLink":"",
                        "createTime": ""
                    }
                ];
            }
        }
    }
}
</script>
<style lang="less">
    .postlist{
        article{
            position: relative;
            padding: 0 1em;
            i{
                width: 100%;
                z-index: -1;
                height: 100%;
                background-size: cover;
                position: absolute;
                opacity: .1;
                left: 0;
            }
            .main{
                max-width: 48em;
                margin: auto;
                padding: 2em 0;
                time{
                    display: block;
                    font-size: 0.75em;
                    line-height: 1.334em;
                    font-weight: 600;
                    margin-bottom: 0.667em;
                    color: #E63917;
                }
                .title{
                    color: #000;
                    font-size: 2em;
                    line-height: 1.25em;
                    font-weight: 700;
                    text-indent: -1px;
                    margin-bottom: .25em;
                }
                .readmore{
                    display: inline-block;
                    font-size: 0.875em;
                    line-height: 1.143em;
                    font-weight: 600;
                    color: #363740;
                    margin-top: 1em;
                    span{
                        color: #E63917;
                        margin-left: .4em;
                    }
                }
            }
        }
        article:hover{
            i{
                opacity: .5;
            }
        }
    }
</style>


